<template>
  <div class="app">
          <!-- 头部 -->
          <div class="top_title">
              <div class="header">
                  用户登录
              </div>
          </div>
          <ul class="form-box">
              <li>
                  <div class="title">
                      手机号码：
                  </div>
                  <div class="content">
                      <input type="text" v-model="username" placeholder="手机号码" id="tel">
                  </div>
              </li>
              <li>
                  <div class="title">
                      密码：
                  </div>
                  <div class="content">
                      <input type="password" v-model="password" placeholder="密码" id="psd">
                  </div>
              </li>
          </ul>
          <div class="button-login">
              <button id="login" @click="Funlogin()">登陆</button>
          </div>
          <div class="button-register">
              <button @click="toRegister()">去注册</button>
          </div>
      </div>
</template>

<script>
import Footer from '../components/Footer.vue'
export default {
  components:{
        Footer
    },
    data(){
        return{
			userId:0,
			username:null,
			password:null,
        }
    },
    computed:{
		
    },
    created(){
		
    },
    methods:{
		Funlogin:function() {
			console.log(this.username)
			console.log(this.password)
			if (this.username != null && this.password != null) {
				this.$http.post('/api/UserController/login?username=' + this.username + "&password=" + this.password).then(response => {
					if (response.data.flag === true) {
						console.log("登录成功！");
						console.log(response.data);
						localStorage.setItem("token", response.data.result.token);
						localStorage.setItem("userId", response.data.result.userId);
						this.userId = response.data.result.userId;
						this.$router.push(`/index`);
					}
					else {
						alert("手机号或者密码错误！");
					}
				})
			}
			else {
				alert("手机号或密码不能为空！");
			}
		},
		toRegister:function() {
			this.$router.push(`/register`);
		}
    }
}
</script>

<style>
	.app{
	    width: 100%;
	    height: 100%;
	}
	.app .top_title{
	    width: 100%;
	    height:12vw ;
	    background-color: #0097FF;
	}
	.app .top_title .header{
	    width: 100%;
	    height:12vw ;
	    background-color: #0097FF;
	    color: #fff;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    font-size: 4.8vw;
	    position: fixed;
	    top: 0;
	    left: 0;
	    z-index: 10;
	}
	.app .form-box{
	    width: 100%;
	    /* margin-top: 12vw; */
	}
	.app .form-box li{
	    box-sizing: border-box;
	    padding: 4vw 3vw 0 3vw;
	    display: flex;
	    align-items: center;
	}
	.app .form-box li .title{
	    flex: 0 0 18vw;
	    font-size: 3vw;
	    font-weight: 700;
	    color: #666;
	}
	.app .form-box li .content{
	    flex: 1;
	}
	.app .form-box li .content input{
	    border: none;
	    outline: none;
	    width: 100%;
	    height: 4vw;
	    font-size: 3vw;
	}
	.app .button-login{
	    width: 100%;
	    box-sizing: border-box;
	    padding: 4vw 3vw 0 3vw;
	}
	.app .button-login button{
	    width: 100%;
	    height: 10vw;
	    font-size: 3.8vw;
	    font-weight: 700;
	    color: #fff;
	    background-color: #38CA73;
	    border-radius: 4px;
	    border: none;
	    outline: none;
	}
	.app .button-register{
	    width: 100%;
	    box-sizing: border-box;
	    padding: 4vw 3vw 0 3vw;
	}
	.app .button-register button{
	    width: 100%;
	    height: 10vw;
	    font-size: 3.8vw;
	    font-weight: 700;
	    /*ä¸Žä¸Šé¢ç™»é™†æŒ‰é’®ä¸åŒçš„åªæœ‰é¢œè‰²ã€èƒŒæ™¯è‰²ã€è¾¹æ¡†ä¸åŒ*/
	    color: #666;
	    background-color: #EEE;
	    border: solid 1px #DDD;
	    border-radius: 4px;
	    border: none;
	    outline: none;
	}
</style>